<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>SDC</title>
<link rel="stylesheet" type="text/css" media="all" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/js.js" type="text/javascript"></script><script src="../js/layui.all.js"></script>
</head>
<style>
	.layui-layer-dialog{background:#fff;}
	.layui-layer-dialog .layui-layer-content{color:#333;}
	.layui-layer-btn .layui-layer-btn0{background:#18254d;border-color:#18254d};
	
	.order_picd{width:3rem;height:3rem;display: block;margin:.1rem auto;}
	.order_picd .order_pic,.order_picd img{width:3rem;height:3rem;display: block;margin:.1rem auto;}
	#order_title{display: none;}
</style>
<body>
	<!-- 头部 -->
	<div class="header">
		<a href="javascript:historygo();" class="hele"></a>
		<h1 class="hetitle">订单详情</h1>
	</div>
	<div id="page" class="page m">
		<div class="order_list order_details">
			<div class="order_item" style="margin-bottom:1px">
				<p class="order_title"><span class="buy">买入</span>SDC<span class="order_titlesp on" id="status">丢失</span></p>
				<p class="order_title2" style="display:none;">取消订单剩余时间：<span class="a-join1" id="timer1" data=""></span></p>
				<p class="order_title"><span class="buy">买入</span>数量<span class="order_titlesp" id="number">0 SDC</span></p>
				<p class="order_title"><span class="buy">买入</span>单价<span class="order_titlesp" id="sysprice">0 USD</span></p>
				<p class="order_title" id="zhongjia"><span class="buy">买入</span>总价<span class="order_titlesp" id="amount">0 USD</span></p>
				
				<p class="order_title">合计人民币<span class="order_titlesp" id="rmb">0 CNY </span></p>
				<p class="order_title"><span id="total_html">实收</span>数量<span class="order_titlesp" id="total">0 SDC</span></p>
			</div>
			<div class="order_item">
				<p class="order_title">创建时间<span class="order_titlesp" id="created_at">丢失</span></p>
				<p class="order_title">上传凭证<span class="order_titlesp on" id="picture">丢失</span></p>
				<p class="order_title">确认订单<span class="order_titlesp on" id="confirm">丢失</span></p>
			</div>
			<div class="order_item">
				<p class="order_title"><span class="buy2">卖方</span>信息</p>
				<p class="order_title">支付宝账号<span class="order_titlesp on" id="alipay">123485678910</span></p>
				<p class="order_title">支付宝名称<span class="order_titlesp on" id="realname">李思思</span></p>
				<p class="order_title">电话号码<span class="order_titlesp on" id="phone">12345678912</span></p>
				<div id="order_title">
					<p class="order_title">支付宝二维码</p>
					<div class="order_picd">
						<img src="http://ctocdn.chinafjjdkj.cn/upload/app/82bcd4a60190ef774a631502c4362a54.png" alt="" class="order_pic" id="order_pic"/>
					</div>
				</div>
			</div>
			<div class="order_item">
				<p class="order_title">上传凭证</p>
				<div class="orderdetails_picd">
					<form id="form1" enctype="multipart/form-data" method="post">
						<img src="../images/orderdetails_pic.png" alt="" class="orderdetails_pic" id="headImg"/>
						<input type="file" class="orderdetails_file" onchange="showPic(this)" name="file" id="fileInput"/>
					</form>
				</div>
				<div class="orderdetails_linkd">
					<button class="orderdetails_link" id="control" onclick="operating(this)">订单</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 遮罩 -->
	<div class="mask" style="background:rgba(0,0,0);"></div>
	<!--图片上传 -->
	<div class="dialog" id="d1">
		<div class="dialog_content">
			<p class="diaorder_title" style="text-align:center;color:#fff;">图片上传中</p>
		</div>
	</div>
	<div class="dialog" id="d2" onclick="dialogClose()">
			<div class="dialog_content">
				<img src="" alt="" class="dialog_img" style="display:block;margin:0 auot;max-width:6rem;">
			</div>
		</div>
	<script src="../js/qrcode.min.js"></script>
	<script src="../js/order_details.js" type="text/javascript"></script>
<script type="text/javascript">
//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
//上传-预览逻辑
$("#headImg").click(function() {    //1.点击默认图片，出发标签<a>的click事件
	$(this).next('input').click();//2.触发input的点击事件，用户选择图片进行上传
});   
 
function showPic(data) {//3.当用户上传图片后，触发input标签的onchange事件，执行showPic()方法
	var objUrl = getObjectURL(data.files[0]);
	console.log(objUrl)
    if (data.files && data.files[0]) {//4.判断input标签的file是否存在

        var reader = new FileReader();//5.实例化一个FileReader()接口

        reader.readAsDataURL(data.files[0]);//6.通过readAsDataURL()方法读取文件，将图片内嵌在网页之中

         reader.onload = function(evt) {//7.调用FileReader()的onload事件，当文件读取成功时，执行8

			 //8.将reader的result属性值赋值给data.parentNode.childNodes[1].childNodes[1].src，实现图片预览
			 $(".diaorder_title").html("图片上传中····")
			 
			dialog("#d1");
			var id = GetQueryString("id");
			var formData=new FormData($("#form1")[0]);
			formData.append("token",token); 
			$.ajax({
				type:"post",
				url:url+'/trade/payphoto.html?token='+token,
				async:true,
				data:formData,
	//			cache: false,  
				processData: false,
				contentType: false,
				dataType:'json',
				success:function(result){
					dialogClose();
					console.log(result)
					if(result.status === "0001"){
						$("#headImg").attr('src',result.src).attr("data-url",result.src);
						// layer.msg(result.message);
					}else{
						isErr(result)
					}
				},
				error:function(){
					layer.msg("响应失败");
				}
			});
		}
    }
}
</script>
</body>
</html>